<template>
  <view class="category" >
    <view class="left-part">
      <scroll-view scroll-y :style="{ height: dynamicLeftHeight + 'px' }">
        <view class="item" v-for="(category, index) in state.categoryList" :key="index"
              @tap="tapCategory(index)"
              :class="{active: state.auxiliaries.config.activeCategoryIdx === index} ">
          <text>{{ category.name }}</text>
        </view>
      </scroll-view>
    </view>
    <scroll-view class="child" scroll-y :style="{ height: (windowHeight - 44 - 50) + 'px' }">
      <view class="list">
        <view class="item uni-ml-3" @tap="tagCategoryChild(childItem)" v-for="(childItem, childIndex) in state.categoryChildList" :key="childIndex">
          <image style="width: 80px; height: 100px;" mode="scaleToFill" :src="childItem.thumbCover"></image>
          <text class="name">{{ childItem.name }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import {computed, ref} from 'vue'
import type {CategoryBriefType} from "@/types/product";
import {onLoad} from "@dcloudio/uni-app";
import {getCategoryChildrenList, getCategoryList} from "@/services/category";
// 获取屏幕边界到安全区域距离
const {windowHeight} = uni.getWindowInfo()
const {hostName} = uni.getSystemInfoSync()

const state = ref({
  categoryList: [] as Array<CategoryBriefType>,
  categoryChildList: [] as Array<CategoryBriefType>,
  recommendIcon: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png",
  auxiliaries: {
    config: {
      activeCategoryIdx: -1,
      activeCategoryId: 0
    },
    categoryCount: 50
  }
})
const tapCategory = (idx: number) => {
  state.value.auxiliaries.config.activeCategoryIdx = idx
  state.value.auxiliaries.config.activeCategoryId = state.value.categoryList[idx].id
  console.log("active category id: ", state.value.auxiliaries.config.activeCategoryId)
  console.log("调用接口获取对应的子分类数据")
  getCategoryChildListData(state.value.auxiliaries.config.activeCategoryId)
}
const tagCategoryChild = (categoryItem: CategoryBriefType) => {
  uni.navigateTo({
    url: "/pages/search/list?category=" + categoryItem.id
  })
}
/**
 * 获取分类列表
 */
const getCategoryListData = async () => {
  state.value.categoryList = [
    {
      id: 1,
      name: "手机通讯",
      thumbCover: "http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20190519/5ac48d27N3f5bb821.jpg"
    }
  ] as Array<CategoryBriefType>
  getCategoryList().then((r) => {
    state.value.categoryList = r.data
  })
}
/**
 * 获取分类下属的子分类
 */
const getCategoryChildListData = (id: number) => {
  console.log("@req category id: ", state.value.auxiliaries.config.activeCategoryId, " children")
  getCategoryChildrenList(id).then((r) => {
    state.value.categoryChildList = r.data
  })
}

const selectFirst = () => {
  state.value.auxiliaries.config.activeCategoryIdx = 0
  state.value.auxiliaries.config.activeCategoryId = state.value.categoryList[0].id
}

const dynamicLeftHeight = computed(() => {
  if (hostName === 'WeChat') {
    return windowHeight
  }
  return windowHeight - 44 - 50
})

onLoad(async () => {
  await getCategoryListData()
  selectFirst()
  getCategoryChildListData(state.value.auxiliaries.config.activeCategoryId)
})
</script>

<style lang="scss">
.category {
  display: flex;
  justify-content: space-between;

  .left-part {
    width: 30%;
    background-color: $uni-bg-color;

    .item {
      border-bottom: 1px solid $uni-border-color;
      padding: 10px 20px;
      font-size: 14px;
    }

    .active {
      background-color: $uni-bg-color-grey;
      color: $uni-color-primary;
    }
  }

  .child {
    width: 70%;

    .list {
      background-color: $uni-bg-color;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;

      .item {
        width: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .name {
          font-size: 15px;
          color: $uni-secondary-color;
          display: -webkit-box;        /* 使用弹性盒子布局 */
          -webkit-box-orient: vertical;/* 设置子元素垂直堆叠 */
          -webkit-line-clamp: 1;       /* 设置显示的行数为1 */
          overflow: hidden;            /* 隐藏超出容器的部分 */
          text-overflow: ellipsis;     /* 当内容被修剪时显示省略号 */
        }
      }
    }
  }
}
</style>
